<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="前端,">





  <link rel="alternate" href="/atom.xml" title="Mr.赵" type="application/atom+xml">






<meta name="description" content="一切都会好的，你看城南的花都开了">
<meta name="keywords" content="前端">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS">
<meta property="og:url" content="https://GodPang.github.io/2019/05/01/CSS/index.html">
<meta property="og:site_name" content="Mr.赵">
<meta property="og:description" content="一切都会好的，你看城南的花都开了">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://ww1.sinaimg.cn/large/006doHETly1g2llvvs1kmj315r0n113i.jpg">
<meta property="og:image" content="https://ws1.sinaimg.cn/large/006doHETly1g2ln1buc9xj315r0n1gwd.jpg">
<meta property="og:image" content="https://ws1.sinaimg.cn/large/006doHETly1g2ln1vnebkj30qf0gjwv8.jpg">
<meta property="og:image" content="https://ws1.sinaimg.cn/large/006doHETly1g2ln20lyu8j30ie0bg48w.jpg">
<meta property="og:image" content="https://godpang.github.io/2019/05/01/CSS/2019-05-01-CSS/1.gif">
<meta property="og:image" content="https://godpang.github.io/2019/05/01/CSS/2019-05-01-CSS/2.gif">
<meta property="og:image" content="https://ws1.sinaimg.cn/large/006doHETly1g2llvvvosjj30pz083771.jpg">
<meta property="og:image" content="https://ws1.sinaimg.cn/large/006doHETly1g2ln2rrnn3j30y60j0ni4.jpg">
<meta property="og:updated_time" content="2019-05-05T09:04:18.104Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="CSS">
<meta name="twitter:description" content="一切都会好的，你看城南的花都开了">
<meta name="twitter:image" content="http://ww1.sinaimg.cn/large/006doHETly1g2llvvs1kmj315r0n113i.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":true,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://GodPang.github.io/2019/05/01/CSS/">





  <title>CSS | Mr.赵</title>
  








</head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>
    
    <a href="https://GodPang.github.io" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewbox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Mr.赵</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-首页">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-关于">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-标签">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-类别">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            类别
          </a>
        </li>
      
        
        <li class="menu-item menu-item-归档">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://GodPang.github.io/2019/05/01/CSS/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="GodPang">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/touxiang.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Mr.赵">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">CSS</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2019-05-01T10:33:17+08:00">
                2019-05-01
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/web学习/" itemprop="url" rel="index">
                    <span itemprop="name">web学习</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2019/05/01/CSS/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2019/05/01/CSS/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-eye"></i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv"></span>
            </span>
          

          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <html><head><meta name="generator" content="Hexo 3.9.0"></head><body><h3>一切都会好的，你看城南的花都开了</h3>
<a id="more"></a>

<h1 id="一、CSS背景属性-重点"><a href="#一、CSS背景属性-重点" class="headerlink" title="一、CSS背景属性(重点)"></a>一、CSS背景属性(重点)</h1><p>CSS 可以添加背景颜色和背景图片，以及来进行图片设置。在页面上添加一个DIV后，如果只是指定了高度与宽度</p>
<p>然后通过浏览器浏览是看不到任何效果的。</p>
<table>
<thead>
<tr>
<th>background-color</th>
<th>背景颜色</th>
</tr>
</thead>
<tbody><tr>
<td>background-image</td>
<td>背景图片地址</td>
</tr>
<tr>
<td>background-repeat</td>
<td>是否平铺</td>
</tr>
<tr>
<td>background-position</td>
<td>背景位置</td>
</tr>
<tr>
<td>background-attachment</td>
<td>背景固定还是滚动</td>
</tr>
<tr>
<td>背景的合写（复合属性）</td>
<td></td>
</tr>
<tr>
<td>background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置</td>
<td></td>
</tr>
</tbody></table>
<h2 id="1、背景图片-image"><a href="#1、背景图片-image" class="headerlink" title="1、背景图片(image)"></a>1、背景图片(image)</h2><p>语法：</p>
<figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">background-image : none | url (url)</span><br></pre></td></tr></tbody></table></figure>

<p>参数：</p>
<p>none : 　无背景图（默认的）<br>url : 　使用绝对或相对地址指定背景图像</p>
<p>background-image 属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复地话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。</p>
<p>小技巧：  我们提倡 背景图片后面的地址，url不要加引号。</p>
<h2 id="2、背景平铺（repeat）"><a href="#2、背景平铺（repeat）" class="headerlink" title="2、背景平铺（repeat）"></a>2、背景平铺（repeat）</h2><p>语法：</p>
<figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">background-repeat : repeat | no-repeat | repeat-x | repeat-y</span><br></pre></td></tr></tbody></table></figure>

<p>参数：</p>
<p>repeat : 　背景图像在纵向和横向上平铺（默认的）</p>
<p>no-repeat : 　背景图像不平铺</p>
<p>repeat-x : 　背景图像在横向上平铺</p>
<p>repeat-y : 　背景图像在纵向平铺</p>
<p>设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。</p>
<p>取消背景图像的平铺后，发现在左上角，如何让背景图像在右上角显示呢？</p>
<h2 id="3-背景位置-position"><a href="#3-背景位置-position" class="headerlink" title="3.背景位置(position)"></a>3.背景位置(position)</h2><p>语法：</p>
<figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">background-position : length || length</span><br><span class="line"></span><br><span class="line">background-position : position || position</span><br></pre></td></tr></tbody></table></figure>

<p>参数：</p>
<p>length : 　百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位<br>position : 　top | center | bottom | left | center | right</p>
<p>说明：</p>
<p>设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为：(0% 0%)。<br>如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。</p>
<p>注意：</p>
<ol>
<li>position 后面是x坐标和y坐标。 可以使用方位名词或者 精确单位。</li>
<li>如果和精确单位和方位名字混合使用，则必须是x坐标在前，y坐标后面。比如 background-position: 15px top;   则 15px 一定是  x坐标   top是 y坐标。</li>
</ol>
<p>实际工作用的最多的，就是背景图片居中对齐了。</p>
<h2 id="4-背景固定"><a href="#4-背景固定" class="headerlink" title="4:    背景固定"></a>4:    背景固定</h2><p>语法：</p>
<figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">background-attachment : scroll | fixed</span><br></pre></td></tr></tbody></table></figure>

<p>参数：</p>
<p>scroll : 　背景图像是随对象内容滚动<br>fixed : 　背景图像固定</p>
<p>说明：</p>
<p>设置或检索背景图像是随对象内容滚动还是固定的。</p>
<h2 id="5-背景简写"><a href="#5-背景简写" class="headerlink" title="5:背景简写"></a>5:背景简写</h2><p>background属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：</p>
<p>background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置</p>
<figure class="highlight css"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">background</span>: <span class="selector-tag">transparent</span> <span class="selector-tag">url</span>(<span class="selector-tag">image</span><span class="selector-class">.jpg</span>) <span class="selector-tag">repeat-y</span>  <span class="selector-tag">scroll</span> 50% 0 ;</span><br></pre></td></tr></tbody></table></figure>

<h1 id="二：盒子模型（重点）"><a href="#二：盒子模型（重点）" class="headerlink" title="二：盒子模型（重点）"></a>二：盒子模型（重点）</h1><h2 id="1、网页本质"><a href="#1、网页本质" class="headerlink" title="1、网页本质"></a>1、网页本质</h2><p>所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。</p>
<p><img src="http://ww1.sinaimg.cn/large/006doHETly1g2llvvs1kmj315r0n113i.jpg" alt=""></p>
<p>看透网页布局的本质：  把网页元素比如文字图片等等，放入盒子里面，然后利用CSS摆放盒子的过程，就是网页布局。</p>
<p><img src="https://ws1.sinaimg.cn/large/006doHETly1g2ln1buc9xj315r0n1gwd.jpg" alt=""></p>
<p>盒子是有什么构成的呢？</p>
<h2 id="2、盒子模型"><a href="#2、盒子模型" class="headerlink" title="2、盒子模型"></a>2、盒子模型</h2><p>首先，我们来看一张图，来体会下什么是盒子模型。</p>
<p><img src="https://ws1.sinaimg.cn/large/006doHETly1g2ln1vnebkj30qf0gjwv8.jpg" alt=""></p>
<p><img src="https://ws1.sinaimg.cn/large/006doHETly1g2ln20lyu8j30ie0bg48w.jpg" alt=""></p>
<h2 id="3、盒子边框（border）"><a href="#3、盒子边框（border）" class="headerlink" title="3、盒子边框（border）"></a>3、盒子边框（border）</h2><p>语法：</p>
<figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">border : border-width || border-style || border-color</span><br></pre></td></tr></tbody></table></figure>

<p>边框属性—设置边框样式（border-style）</p>
<p>边框样式用于定义页面中边框的风格，常用属性值如下：</p>
<pre><code>none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线</code></pre><h2 id="4、盒子边框写法总结表"><a href="#4、盒子边框写法总结表" class="headerlink" title="4、盒子边框写法总结表"></a>4、盒子边框写法总结表</h2><table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody><tr>
<td>设置内容</td>
<td>样式属性</td>
<td>常用属性值</td>
</tr>
<tr>
<td>上边框</td>
<td>border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>下边框</td>
<td>border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>左边框</td>
<td>border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>右边框</td>
<td>border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;</td>
<td></td>
</tr>
<tr>
<td>样式综合设置</td>
<td>border-style:上边 [右边 下边 左边];</td>
<td>none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线</td>
</tr>
<tr>
<td>宽度综合设置</td>
<td>border-width:上边 [右边 下边 左边];</td>
<td>像素值</td>
</tr>
<tr>
<td>颜色综合设置</td>
<td>border-color:上边 [右边 下边 左边];</td>
<td>颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)</td>
</tr>
<tr>
<td>边框综合设置</td>
<td>border:四边宽度 四边样式 四边颜色;</td>
<td></td>
</tr>
</tbody></table>
<h2 id="5、内边距（padding）"><a href="#5、内边距（padding）" class="headerlink" title="5、内边距（padding）"></a>5、内边距（padding）</h2><p>padding属性用于设置内边距。  是指 边框与内容之间的距离。</p>
<p>padding-top:上内边距</p>
<p>padding-right:右内边距</p>
<p>padding-bottom:下内边距</p>
<p>padding-left:左内边距注意</p>
<p>注意： 后面跟几个数值表示的意思是不一样的。</p>
<table>
<thead>
<tr>
<th>值的个数</th>
<th>表达意思</th>
</tr>
</thead>
<tbody><tr>
<td>1个值</td>
<td>padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素</td>
</tr>
<tr>
<td>2个值</td>
<td>padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素</td>
</tr>
<tr>
<td>3个值</td>
<td>padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素</td>
</tr>
<tr>
<td>4个值</td>
<td>padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针</td>
</tr>
</tbody></table>
<h2 id="6、导航条案例"><a href="#6、导航条案例" class="headerlink" title="6、导航条案例"></a>6、导航条案例</h2><h2 id="7、外边距（margin）"><a href="#7、外边距（margin）" class="headerlink" title="7、外边距（margin）"></a>7、外边距（margin）</h2><p>margin属性用于设置外边距。  设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。</p>
<p>margin-top:上外边距</p>
<p>margin-right:右外边距</p>
<p>margin-bottom:下外边距</p>
<p>margin-left:上外边距</p>
<p>margin:上外边距 右外边距  下外边距  左外边</p>
<p>取值顺序跟内边距相同。</p>
<h2 id="8、外边距实现盒子居中"><a href="#8、外边距实现盒子居中" class="headerlink" title="8、外边距实现盒子居中"></a>8、外边距实现盒子居中</h2><p>可以让一个盒子实现水平居中，需要满足一下两个条件：</p>
<ol>
<li>必须是块级元素。</li>
<li>盒子必须指定了宽度（width）</li>
</ol>
<p>然后就给<strong>左右的外边距都设置为auto</strong>，就可使块级元素水平居中。</p>
<p>实际工作中常用这种方式进行网页布局，示例代码如下：</p>
<figure class="highlight css"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.header</span>{ <span class="attribute">width</span>:<span class="number">960px</span>; <span class="attribute">margin</span>:<span class="number">0</span> auto;}</span><br></pre></td></tr></tbody></table></figure>

<h2 id="9、清除元素的默认内外边距"><a href="#9、清除元素的默认内外边距" class="headerlink" title="9、清除元素的默认内外边距"></a>9、清除元素的默认内外边距</h2><p>为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：</p>
<figure class="highlight css"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">* {</span><br><span class="line">   <span class="attribute">padding</span>:<span class="number">0</span>;         <span class="comment">/* 清除内边距 */</span></span><br><span class="line">   <span class="attribute">margin</span>:<span class="number">0</span>;          <span class="comment">/* 清除外边距 */</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>

<p>注意：  行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。</p>
<p>我们尽量不要给行内元素指定上下的内外边距就好了。</p>
<h2 id="10、新闻模块案例"><a href="#10、新闻模块案例" class="headerlink" title="10、新闻模块案例"></a>10、新闻模块案例</h2><p>我们可以使用盒子模型，来开发一个案例。</p>
<h2 id="11、盒子模型布局稳定性"><a href="#11、盒子模型布局稳定性" class="headerlink" title="11、盒子模型布局稳定性"></a>11、盒子模型布局稳定性</h2><p>开始学习盒子模型，同学们最大的困惑就是， 分不清内外边距的使用，什么情况下使用内边距，什么情况下使用外边距？</p>
<p>答案是：  其实他们大部分情况下是可以混用的。  就是说，你用内边距也可以，用外边距也可以。 你觉得哪个方便，就用哪个。</p>
<p>但是，总有一个最好用的吧，我们根据稳定性来分，建议如下：</p>
<p>按照 优先使用  宽度 （width）  其次 使用内边距（padding）    再次  外边距（margin）。</p>
<pre><code>width >  padding  >   margin</code></pre><p>原因：</p>
<ol>
<li><p>margin 会有外边距合并 还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。</p>
</li>
<li><p>padding  会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。</p>
</li>
<li><p>width   没有问题（嗨皮）我们经常使用宽度剩余法 高度剩余法来做。</p>
</li>
</ol>
<h1 id="三、定位-position"><a href="#三、定位-position" class="headerlink" title="三、定位(position)"></a>三、定位(position)</h1><p>定位就是将某个元素固定在页面的某个位置上。</p>
<p>定位的价值就是移动位置，让盒子移动到我们想要的位置上。</p>
<p><a href="https://www.boxuegu.com/" target="_blank" rel="noopener">https://www.boxuegu.com/</a></p>
<h2 id="1、为什么要用定位？"><a href="#1、为什么要用定位？" class="headerlink" title="1、为什么要用定位？"></a>1、为什么要用定位？</h2><p>那么定位，最长运用的场景再那里呢？   来看几幅图片，你一定会有感悟！</p>
<p>第一幅图， 小黄色块可以在图片上移动：<img src="/2019/05/01/CSS/.\2019-05-01-CSS\1.gif" alt=""></p>
<p>第二幅图， 左右箭头压住图片：</p>
<p><img src="/2019/05/01/CSS/.\2019-05-01-CSS\2.gif" alt=""></p>
<p>第三幅图,  hot 再盒子外面多出一块，更加突出：</p>
<p><img src="https://ws1.sinaimg.cn/large/006doHETly1g2llvvvosjj30pz083771.jpg" alt=""></p>
<h2 id="2、元素的定位属性"><a href="#2、元素的定位属性" class="headerlink" title="2、元素的定位属性"></a>2、元素的定位属性</h2><p>元素的定位属性主要包括定位模式和边偏移两部分。</p>
<p>（1）边偏移</p>
<table>
<thead>
<tr>
<th>边偏移属性</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>top</td>
<td>顶端偏移量，定义元素相对于其父元素上边线的距离</td>
</tr>
<tr>
<td>bottom</td>
<td>底部偏移量，定义元素相对于其父元素下边线的距离</td>
</tr>
<tr>
<td>left</td>
<td>左侧偏移量，定义元素相对于其父元素左边线的距离</td>
</tr>
<tr>
<td>right</td>
<td>右侧偏移量，定义元素相对于其父元素右边线的距离</td>
</tr>
</tbody></table>
<p>也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px;  left: 30px; 等等</p>
<p>（2） 定位模式</p>
<p>在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：</p>
<p>选择器{position:属性值;}</p>
<p>position属性的常用值</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>static</td>
<td>自动定位（默认定位方式）</td>
</tr>
<tr>
<td>relative</td>
<td>相对定位，相对于其原文档流的位置进行定位</td>
</tr>
<tr>
<td>absolute</td>
<td>绝对定位，相对于其上一个已经定位的父元素进行定位</td>
</tr>
<tr>
<td>fixed</td>
<td>固定定位，相对于浏览器窗口进行定位</td>
</tr>
</tbody></table>
<h2 id="3、静态定位-static"><a href="#3、静态定位-static" class="headerlink" title="3、静态定位(static)"></a>3、静态定位(static)</h2><p>静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。</p>
<p>上面的话翻译成白话：  就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。</p>
<p>在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。</p>
<h2 id="4、相对定位"><a href="#4、相对定位" class="headerlink" title="4、相对定位"></a>4、相对定位</h2><p>相对定位指的就是相对谁进行定位。</p>
<p>相对定位是将元素相对于它在标准流中的位置进行定位（相对于原来的左上角），当position属性的取值为relative时，可以将元素定位于相对位置。</p>
<p>注意：    相对定位最重要的一点是，它可以通过边偏移移动位置，但是原来的所占的位置，继续占有。</p>
<p>就是说，相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。</p>
<p>定位的价值就是移动位置，让盒子移动到我们想要的位置上。例如，前面展示的图片案例。</p>
<h2 id="5、绝对定位"><a href="#5、绝对定位" class="headerlink" title="5、绝对定位"></a>5、绝对定位</h2><p>当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。</p>
<p>注意：    绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。</p>
<h2 id="6、父级没有定位"><a href="#6、父级没有定位" class="headerlink" title="6、父级没有定位"></a>6、父级没有定位</h2><p>若所有父元素都没有定位，子元素（绝对定位）以浏览器为准对齐(document文档)。</p>
<p>但是我们希望的是子元素就是定位到父元素中的指定位置。</p>
<h2 id="7、父级有定位"><a href="#7、父级有定位" class="headerlink" title="7、父级有定位"></a>7、父级有定位</h2><p>绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。</p>
<p>那么我们的父元素到底定位什么合适呢？</p>
<p>子绝父相</p>
<h2 id="8、子绝父相"><a href="#8、子绝父相" class="headerlink" title="8、子绝父相"></a>8、子绝父相</h2><p>这个“子绝父相”太重要了，是我们学习定位的口诀，时时刻刻记住的。</p>
<p>这句话的意思是 子级是绝对定位的话， 父级要用相对定位。</p>
<p>首先， 我们说下， 绝对定位是将元素依据最近的已经定位绝对、固定或相对定位）的父元素（祖先）进行定位。</p>
<p>就是说， 子级是绝对定位，父亲只要是定位即可（不管父亲是绝对定位还是相对定位，甚至是固定定位都可以），就是说， 子绝父绝，子绝父相都是正确的。</p>
<p>但是，在我们网页布局的时候， 最常说的 子绝父相是怎么来的呢？ 请看如下图：<br><img src="https://ws1.sinaimg.cn/large/006doHETly1g2ln2rrnn3j30y60j0ni4.jpg" alt=""><br>所以，我们可以得出如下结论：</p>
<p>因为子级是绝对定位，不会占有位置， 可以放到父盒子里面的任何一个地方。</p>
<p>父盒子布局时，需要占有位置，因此父亲只能是 相对定位.</p>
<p>这就是子绝父相的由来。</p>
</body></html>
      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/前端/" rel="tag"># 前端</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2019/05/01/HTML/" rel="next" title="HTML">
                <i class="fa fa-chevron-left"></i> HTML
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2019/05/01/JavaScript/" rel="prev" title="JavaScript">
                JavaScript <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/images/touxiang.jpg" alt="GodPang">
            
              <p class="site-author-name" itemprop="name">GodPang</p>
              <p class="site-description motion-element" itemprop="description">一只一直在努力的胖子</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">23</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">7</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">11</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/GodPang" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://www.jianshu.com/u/c8a45218e240" target="_blank" title="简书">
                      
                        <i class="fa fa-fw fa-book"></i>简书</a>
                  </span>
                
            </div>
          

          
          

          
          
            <div class="links-of-blogroll motion-element links-of-blogroll-block">
              <div class="links-of-blogroll-title">
                <i class="fa  fa-fw fa-link"></i>
                Links
              </div>
              <ul class="links-of-blogroll-list">
                
                  <li class="links-of-blogroll-item">
                    <a href="https://lengjibo.github.io/" title="冷逸" target="_blank">冷逸</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://test482.github.io" title="Eliot's Blog" target="_blank">Eliot's Blog</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://prontosil.club/" title="百浪多息" target="_blank">百浪多息</a>
                  </li>
                
              </ul>
            </div>
          

          <div id="music163player">
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="//music.163.com/outchain/player?type=2&id=38592976&auto=1&height=66"></iframe>
</div>

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#null"><span class="nav-number">1.</span> <span class="nav-text">一切都会好的，你看城南的花都开了</span></a></li></ol><li class="nav-item nav-level-1"><a class="nav-link" href="#一、CSS背景属性-重点"><span class="nav-number"></span> <span class="nav-text">一、CSS背景属性(重点)</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1、背景图片-image"><span class="nav-number"></span> <span class="nav-text">1、背景图片(image)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2、背景平铺（repeat）"><span class="nav-number"></span> <span class="nav-text">2、背景平铺（repeat）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-背景位置-position"><span class="nav-number"></span> <span class="nav-text">3.背景位置(position)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-背景固定"><span class="nav-number"></span> <span class="nav-text">4:    背景固定</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-背景简写"><span class="nav-number"></span> <span class="nav-text">5:背景简写</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#二：盒子模型（重点）"><span class="nav-number"></span> <span class="nav-text">二：盒子模型（重点）</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1、网页本质"><span class="nav-number"></span> <span class="nav-text">1、网页本质</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2、盒子模型"><span class="nav-number"></span> <span class="nav-text">2、盒子模型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3、盒子边框（border）"><span class="nav-number"></span> <span class="nav-text">3、盒子边框（border）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4、盒子边框写法总结表"><span class="nav-number"></span> <span class="nav-text">4、盒子边框写法总结表</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5、内边距（padding）"><span class="nav-number"></span> <span class="nav-text">5、内边距（padding）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6、导航条案例"><span class="nav-number"></span> <span class="nav-text">6、导航条案例</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7、外边距（margin）"><span class="nav-number"></span> <span class="nav-text">7、外边距（margin）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8、外边距实现盒子居中"><span class="nav-number"></span> <span class="nav-text">8、外边距实现盒子居中</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9、清除元素的默认内外边距"><span class="nav-number"></span> <span class="nav-text">9、清除元素的默认内外边距</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#10、新闻模块案例"><span class="nav-number"></span> <span class="nav-text">10、新闻模块案例</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#11、盒子模型布局稳定性"><span class="nav-number"></span> <span class="nav-text">11、盒子模型布局稳定性</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#三、定位-position"><span class="nav-number"></span> <span class="nav-text">三、定位(position)</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1、为什么要用定位？"><span class="nav-number"></span> <span class="nav-text">1、为什么要用定位？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2、元素的定位属性"><span class="nav-number"></span> <span class="nav-text">2、元素的定位属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3、静态定位-static"><span class="nav-number"></span> <span class="nav-text">3、静态定位(static)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4、相对定位"><span class="nav-number"></span> <span class="nav-text">4、相对定位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5、绝对定位"><span class="nav-number"></span> <span class="nav-text">5、绝对定位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6、父级没有定位"><span class="nav-number"></span> <span class="nav-text">6、父级没有定位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7、父级有定位"><span class="nav-number"></span> <span class="nav-text">7、父级有定位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8、子绝父相"><span class="nav-number"></span> <span class="nav-text">8、子绝父相</span></a></li></ol></li></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>
    


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2018 &mdash; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">GodPang</span>

  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>



  <div class="footer-custom">Hosted by <a target="_blank" rel="external nofollow" href="https://pages.github.com/">GitHub Pages</a></div>


        
<div class="busuanzi-count">
  <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye"></i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      
    </span>
  
</div>








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
          <span id="scrollpercent"><span>0</span>%</span>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: 'RAQiIXnddbLLbBRiBcDuJo3j-gzGzoHsz',
        appKey: 'rhBtL6nW6zYrDqLcVsPX4M51',
        placeholder: '大佬勿喷，文明交流',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/clicklove.js"></script>

</body>
</html>
